<template>
  <ul class='tabbar'>
    <!-- 设备按钮 -->
    <li class='tabbar-item'
        v-for="item in tabList"
        :key="item.name"
        @click='goToPage(item.value,item.name)'
        :class='{ "add-animate": tabValue === item.value, "remove-animate": oldTabValue === item.value }'
    >
      <!--      {{item.name}}-->

      <div class='child child-1'>
        <div class='tabbar-icon'>
          <img :src='item.img' v-show='tabValue != item.value'>
        </div>
        <div class='tabbar-label'>
          <span>{{item.name}}</span>
        </div>
      </div>
      <div class='child child-4'>
        <div class='tabbar-icon'>

          <img :src='item.imgOn' v-show='tabValue == item.value'>
        </div>
        <div class='tabbar-label'>
          <span>  {{item.name}}</span>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
  import Enums from '@/utils/enums'

  export default {
    mixins: [Enums],
    props: ['roadId', 'deptTreeId', 'slopeId'],
    name: 'three-tabbar',
    computed: {},
    data() {
      return {
        EnumPipeTypeList: [],
        oldTabValue: undefined,
        tabValue: null,
        tabList: [
          {
            name: '所有管线',
            value: null,
            img: require('../imgs/home.png'),
            imgOn: require('../imgs/homeon.png'),
          },
          {
            name: '给水管线',
            value: 1,
            img: require('../imgs/geishuiguan.png'),
            imgOn: require('../imgs/jishuiguanon.png'),
          },
          {
            name: '再生水管线',
            value: 2,
            img: require('../imgs/zaishengshui.png'),
            imgOn: require('../imgs/zaishengshuion.png'),
          },
          {
            name: '雨水管线',
            value: 3,
            img: require('../imgs/yushuighuan.png'),
            imgOn: require('../imgs/yushuion.png'),
          },
          {
            name: '污水管线',
            value: 4,
            img: require('../imgs/wushuiguan.png'),
            imgOn: require('../imgs/wushuion.png'),
          },
          {
            name: '热力管线',
            value: 5,
            img: require('../imgs/reli.png'),
            imgOn: require('../imgs/renlion.png'),
          },
          {
            name: '燃气管线',
            value: 6,
            img: require('../imgs/ranqi.png'),
            imgOn: require('../imgs/ranqion.png'),
          },
          {
            name: '电力管线',
            value: 7,
            img: require('../imgs/dianli.png'),
            imgOn: require('../imgs/dianliOn.png'),
          },
          {
            name: '通信管线',
            value: 8,
            img: require('../imgs/tongxing.png'),
            imgOn: require('../imgs/tongxingOn.png'),
          },


        ]
      }
    },
    watch: {
      tabValue(value, oldVlaue) {
        this.oldTabValue = oldVlaue
      }
    },
    methods: {
      goToPage(value, tabName) {
        this.tabValue = value
        this.$emit('changeMaps', value)
      }

    },
    created() {
      this.queryDictList(['EnumPipeType'], ['EnumPipeTypeList'])

    },
    mounted() {
    }
  }
</script>

<style lang="less" scoped>
  .tabbar {
    display: inline-flex;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    height: 12%;
    background-image: url(../imgs/footer.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
  }

  .tabbar-item {
    width: 3.75rem /* 60/16 */;
    height: 84%;
    display: block;
    /* flex: 1; */
    /* padding: 5px 0 0; */
    font-size: 0;
    color: #f6f6f6;
    text-align: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* perspective: 30px; */
    transform-style: preserve-3d;

    &:not(:last-child) {
      margin-right: 1.5rem /* 24/16 */;
    }
  }

  .add-animate {
    transition: all 1s;
    animation-name: rotateDown;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-fill-mode: both;
  }

  .remove-animate {
    transition: all 1s;
    animation-name: rotateUp;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-fill-mode: both;
  }

  @keyframes rotateUp {
    0% {
      transform: rotateX(-90deg);
    }
    70% {
      transform: rotateX(10deg);
    }
    100% {
      transform: rotateX(0);
    }
  }

  @keyframes rotateDown {
    0% {
      transform: rotateX(0);
    }
    50% {
      transform: rotateX(-100deg);
    }
    100% {
      transform: rotateX(-90deg);
    }
  }

  .child {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
  }

  /* 前面 */
  .child-1 {
    width: 100%;
    height: 100%;
    transform: translateZ(50%);
    /* z-index: 1000; */
  }

  /* 后面 */
  .child-2 {
    width: 100%;
    height: 100%;
    transform: translateZ(-50%);
  }

  /* 上面 */
  .child-3 {
    width: 100%;
    height: 100%;
    transform: translateY(50%) rotateX(90deg);
    /* border: 1px #000 solid; */
  }

  /* 下面 */
  .child-4 {
    width: 100%;
    height: 100%;
    transform: translateY(-50%) rotateX(90deg);
    /* border: 1px #000 solid; */
  }

  /* 左面 */
  .child-5 {
    width: 100%;
    height: 100%;
    transform: translateX(50%) rotateY(90deg);
    /* border: 1px #000 solid; */
  }

  /* 右面 */
  .child-6 {
    width: 100%;
    height: 100%;
    transform: translateX(-50%) rotateY(90deg);
    /* border: 1px #000 solid; */
  }

  .tabbar-icon {
    display: inline-block;
    width: 100%;
    margin: 0 0 8%;
  }

  .tabbar-icon img {
    width: 90%;
    height: 60px;
  }

  .tabbar-label {
    text-align: center;
    color: #f6f6f6;
    font-size: 1rem;
    line-height: 1.5;
    white-space: nowrap;
    /* padding-bottom: 5px; */
  }
</style>
